<template>
	<header class="header">
		<h1>todos</h1>
		<input id="toggle-all" class="toggle-all" type="checkbox" v-model="isAll">
		<label for="toggle-all"></label>
		<input class="new-todo" placeholder="输入任务名称-回车确认" autofocus 
		v-model="context"
		@keydown.enter="add(context)"
		/>
	</header>
</template>

<script>
import { mapGetters, mapMutations, mapState } from 'vuex'
	export default {

		data () {
			return {
				context: ''
			}
		},

		methods:{
			...mapMutations('todos', [
				'addFn',
				'changeAll'
			]),
			add(context){
				if(context === '') return 

				this.addFn(context)

				this.context = ""
			}
		},
		computed: {
			...mapState('todos', ['list']),
			
			isAll:{
				get(){
					return this.list.every(item => item.isDone)
				},
				set(val){
					return this.changeAll(val)
				}
			}
		}

	}
</script>
